<!DOCTYPE HTML>
<html>
<head>
    {include file="common:meta"}
</head>
<body>
<div class="page-container">
    <div class=" float-e-margins">
        <div class="ibox-content">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">个人房间流水</a>
                    <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="true">个人房间添加</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class=" tab-pane active" id="tab-1">
                        <div class="ibox-content" id="toolbar">
                            <form action="" class="form-inline" id="" data-url="">
                                <div class="form-group">
                                    <label class="control-label">
                                        <label class="control-label">开始时间：
                                            <input type="text" class="form-control date-search" id="start_time" placeholder="">
                                        </label>
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label class="control-label">
                                        <label class="control-label">结束时间：
                                            <input type="text" class="form-control date-search" id="end_time" placeholder="">
                                        </label>
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label class="control-label" for="key">请选择:</label>
                                    <select id="key" class="form-control" name="key">
                                        <option value="r_uid">房主ID</option>
                                        <option value="h_uid">厅主ID</option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label class="control-label" for="value">输入:</label>
                                    <input class="form-control" id="value" type="text" name="value">
                                </div>
                                <button type="button" class="btn btn-primary" id="eventQuery">查询</button>
                                <button type="button" onclick="location.replace(location.href);" class="btn btn-success ">刷新</button>
                                <!--<button type="button" class="btn btn-primary"-->
                                <!--onclick="window.open('/FamilyFlowingExportExcel?start_time='+$('#start_time').val()+'&end_time='+$('#end_time').val())">-->
                                <!--导出-->
                                <!--</button>-->
                            </form>
                        </div>
                        <table id="tb_departments"></table>
                    </div>
                    <div class=" tab-pane" id="tab-2">
                        <div class="ibox-content">
                            <form class="form-horizontal"  id="form"   data-url="/PersonalRoomAdd">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="u_id">
                                        <span class="c-red">*</span>房主UID：
                                    </label>
                                    <div class="col-md-2 col-sm-10">
                                        <input type="number" class="form-control" id="u_id" name="u_id">
                                    </div>

                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="room_id">
                                        <span class="c-red">*</span>厅主UID：
                                    </label>
                                    <div class="col-md-2 col-sm-10">
                                        <input type="number" class="form-control" id="room_id" name="room_id">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="alipay_card">
                                        <span class="c-red">*</span>绑定支付宝：
                                    </label>
                                    <div class="col-md-2 col-sm-10">
                                        <input type="number" class="form-control" id="alipay_card" value="" name="alipay_card">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">
                                        <span class="c-red">*</span>支付宝姓名：
                                    </label>
                                    <div class="col-md-2 col-sm-10">
                                        <input type="text" class="form-control" id="alipay_name" value="" name="alipay_name">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">
                                        <span class="c-red">*</span>手机号：
                                    </label>
                                    <div class="col-md-2 col-sm-10">
                                        <input type="number" class="form-control" id="phone" value="" name="phone">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="scale">
                                        <span class="c-red">*</span>返现比例：
                                    </label>
                                    <div class="col-md-2 col-sm-10">
                                        <input id="scale"  class="form-control" type="number" name="scale">
                                    </div>
                                    <div style="margin-top:10px; margin-left:1px; float: left;">%</div>

                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">
                                        <span class="c-red">*</span>开通兑换：
                                    </label>
                                    <div class="col-md-2 col-sm-10">
                                        <div class="radio i-checks">
                                            <label><input type="radio"  name="check_exchange" value="1"> <i></i> 开通</label>
                                            <label><input type="radio" name="check_exchange"  value="2"> <i></i> 不开通</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">
                                        <span class="c-red">*</span>状态：
                                    </label>
                                    <div class="col-md-2 col-sm-10">
                                        <div class="radio i-checks">
                                            <label><input type="radio"  name="status" value="1"> <i></i> 正常</label>
                                            <label><input type="radio" name="status"  value="2"> <i></i> 关闭</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                                        <button class="btn btn-primary" type="button" onclick="commonSubmit(this)">添加
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="common:footer"}
<script>
    $(document).ready(function () {
        initTable();
    });

    function initTable() {
        $('#tb_departments').bootstrapTable({
            url: '/FlowPersonalIndexData',         //请求后台的URL（*）
            dataField: "data",
            method: 'get',                      //请求方式（*）
            striped: true,                      //是否显示行间隔色
            cache: true,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            queryParams: queryParams,//传递参数（*）
            showToggle: true,
            showRefresh: true,
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            showColumns: true,                  //是否显示所有的列
            showPaginationSwitch: true,
            minimumCountColumns: 2,             //最少允许的列数
            toolbar: '#toolbar',
            columns: [{
                field: 'id',
                title: 'ID',
                sortable: true
            }, {
                field: 'r_name',
                title: '房间名称'
            }, {
                field: 'r_head',
                title: '房主ID'
            }, {
                field: 'r_nickname',
                title: '房主昵称'
            }, {
                field: 'u_id',
                title: '厅主ID'
            }, {
                field: 'alipay_name',
                title: '厅主支付宝姓名',
                editable: {
                    type: 'text',
                    title: '绑定姓名',
                    validate: function (v) {
                        console.log(v);
                        if (v=='') return '绑定姓名不能为空';
                    }
                }
            }, {
                field: 'alipay_card',
                title: '厅主支付宝',
                editable: {
                    type: 'number',
                    title: '绑定支付宝',
                    validate: function (v) {
                        if (!v) return '支付宝不能为空';
                    }
                }
            }, {
                field: 'phone',
                title: '厅主手机',
                editable: {
                    type: 'number',
                    title: '厅主手机',
                    validate: function (v) {
                        if (!v) return '手机号不能为空';
                    }
                }
            }, {
                field: 'scale',
                title: '返现比例',
                formatter:function(value,row,index){
                    return row.scale + '%';
                },
                editable: {
                    type: 'number',
                    title: '返现比例(填写整数)',
                    validate: function (v) {
                        if (v < 0) return '返现比例不能为负';
                    }
                }
            }, {
                field: 'check_exchange',
                title: '(开通/禁止)兑换',
                editable: {
                    type: 'select',
                    title: '(开通/禁止)兑换',
                    source:[{value:"1",text:"开通"},{value:"2",text:"禁止"}],
                    validate: function (v) {
                        if (!v) return '不能为空';
                    }
                }

            }, {
                field: 'Button',
                title: '操作',
                events: operateEvents,
                formatter: operateFormatter
            }],
            //保存的使用
            onEditableSave: function (field, row, oldValue, $el) {
                //可进行异步操作
                $.ajax({
                    type: "get",
                    url: "/PersonalRoomEdit",
                    data: row,
                    dataType: 'JSON',
                    success: function (re) {
                        if (re.code === 100) {
                            layer.msg(re.msg, {icon: 1, time: 2000});
                        } else {
                            layer.msg(re.msg, {icon: 2, time: 2000});
                        }
                    },
                    error: function () {
                        layer.msg('服务器出小差了');
                    },
                    complete: function () {

                    }

                });
            }
        });
    }

    //得到查询的参数
    function queryParams(params) {
        params.offset = params.offset / params.limit + 1;
        params.start_time = $('#start_time').val();
        params.end_time = $('#end_time').val();
        params.key = $('#key').val();
        params.value = $('#value').val();
        return params;
    }
    //时间搜索插件
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        lay('.date-search').each(function () {
            laydate.render({
                elem: this,
                type: 'datetime',
                trigger: 'click',
                format: 'yyyy-MM-dd HH:mm:ss'
            });
        });
    });
    function operateFormatter(value, row, index){
        if(row.status===1)  var status = '关闭';
        else var status = '打开';
        return [
            '<button type="button"  class="del-family-room btn btn-default  btn-sm" style="margin-right:15px;">删除</button>',
            '<button type="button"  class="change-status btn btn-default  btn-sm" style="margin-right:15px;">'+status+'</button>',
            '<button type="button"  class="flowing-info btn btn-default  btn-sm" style="margin-right:15px;">查看个人房间流水</button>'
        ].join('');
    }
    window.operateEvents = {
        'click .flowing-info':function(e,value,row,index){
            layer.open({
                type: 2,
                title: ['个人房间流水信息','font-size:18px;font-family:宋体;font-weight:700;'],
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['1000px', '600px'],
                content:"/FamilyRoomFlowingInfo?roomId=" + row.room_id,
                offset:'auto',
                scrollbar:false
            });
        },
        'click .del-family-room':function(e,value,row,index){
            layer.confirm('确认删除吗？',{
                title:['提示','font-size:18px;font-family:楷体;font-weight:700;'],
                btn: ['确定','取消'] //按钮
            },function(){
                $.ajax({
                    type: 'get',
                    dataType: 'json',
                    url: '/PersonalRoomDel',
                    data: {'id': row.id},
                    success: function (re) {
                        if (re.code === 100) {
                            layer.msg(re.msg, {icon: 1, time: 2000});
                            $('#tb_departments').bootstrapTable(('refresh'));	// 很重要的一步，刷新url！
                        } else {
                            layer.msg(re.msg, {icon: 2, time: 2000});
                        }
                    },
                    error: function (data) {
                        layer.msg('服务器出小差了', {icon: 2, time: 2000});
                    }
                });
            });
        },
        'click .change-status':function(e,value,row,index){

            changeStatus(row,this);
        }
    };
    function changeStatus(row,obj){
        var status = row.status === 1 ? '打开' : '关闭' ;
        row.status === 1 ? row.status = 2 : row.status = 1;
        $.ajax({
            type: 'get',
            dataType: 'json',
            url: '/PersonalRoomChangeStatus',
            data: {'id': row.id},
            success: function (re) {
                if (re.code === 100) {
                    layer.msg(re.msg, {icon: 1, time: 2000});
                    $(obj).html(status);
                } else {
                    layer.msg(re.msg, {icon: 2, time: 2000});
                }
            },
            error: function (data) {
                layer.msg('服务器出小差了', {icon: 2, time: 2000});
            }
        });
    }

    // 搜索按钮触发事件
    $(function () {
        $("#eventQuery").click(function () {
            $('#tb_departments').bootstrapTable(('refresh'));	// 很重要的一步，刷新url！
        });
    });
</script>
</body>
</html>